<script setup lang="jsx">
import { storeToRefs } from 'pinia'
import useAppStore from '@/stores/app'
import { setLocale } from '@/lang'
import { ref, h, onMounted } from 'vue'

const appStore = useAppStore()
function handleUpdateValue() {
  const { language } = storeToRefs(appStore)
  console.log('language.value', language.value)
  const lang = language.value == 'zh' ? 'en' : 'zh'
  setLocale(lang)
}

const handleChange = (newValue) => {
  if (newValue.length > 1) {
    value.value = [newValue[newValue.length - 1]]
  }
}
const value = ref([])
const options = [...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }))

// table
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address'
  }
]

const data = [
  {
    key: 1,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.'
  },
  {
    key: 2,
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
  },
  {
    key: 3,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.'
  }
]
// function customExpandIcon(props) {
//   return h(
//     'div', // type
//     { id: 'foo', class: 'bar', innerHTML: 'hello' }, // props
//     [
//       /* children */
//     ]
//   )
// }
const expandedRowKeys = ref([])

const handleCellClick = (record, column) => {
  console.log('record', record)
  console.log('column', column) // 可以通多column 来处理 具体点击那个单元格执行展开
  if (column.key !== 'name') {
    return
  }
  const olnyExpandOne = true // 只展开一行
  if (olnyExpandOne) {
    expandedRowKeys.value = []
    expandedRowKeys.value.push(record.key)
  } else {
    const index = expandedRowKeys.value.indexOf(record.key)
    if (index === -1) {
      expandedRowKeys.value.push(record.key)
    } else {
      expandedRowKeys.value.splice(index, 1)
    }
  }
}
const expandedRowRender = (record) => {
  return <p style="margin: 0">123123</p>
}
import { DraggableModal } from '@/components/core/draggable-modal'
const visible = ref(false)
function open() {
  // window.open(
  //   'https://blog.csdn.net/2201_75874827/article/details/136027356',
  //   'newwindow',
  //   'height=600, width=600, top=0, left=0'
  // )
  const random = Math.random()
  window.open(
    `https://blog.csdn.net/2201_75874827/article/details/136027356/?userId=${random}`,
    'popupWindow'
  )
}
function downloadLink() {
  window.location.href =
    'https://artifact.lx.netease.com/download/ynote-electron/%E6%9C%89%E9%81%93%E4%BA%91%E7%AC%94%E8%AE%B0.exe'
}
function downloadLink1() {
  const url =
    'https://artifact.lx.netease.com/download/ynote-electron/%E6%9C%89%E9%81%93%E4%BA%91%E7%AC%94%E8%AE%B0.exe'
  let link = document.createElement('a')
  link.href = url
  a.style.display = 'none'
  link.click()
  window.URL.revokeObjectURL(link.href)
  document.body.removeChild(a)
}
</script>

<template>
  <div id="main-app">
    <button @click="visible = true">123</button>
    <button @click="open">open</button>
    <button @click="downloadLink">downloadLink</button>
    <button @click="downloadLink">downloadLink1</button>

    <DraggableModal v-model:open="visible">
      <a-table
        :columns="columns"
        :data-source="data"
        :expandedRowKeys="expandedRowKeys"
        :scroll="{ x: 2000 }"
        :expandedRowRender="expandedRowRender"
        :expandIconColumnIndex="-1"
      >
        <!-- <template #expandedRowRender> 123 </template> -->
        <template #bodyCell="{ text, record, column }">
          <span @click="handleCellClick(record, column)">
            {{ text }}
          </span>
        </template>
      </a-table>
    </DraggableModal>

    <a-table
      :columns="columns"
      :data-source="data"
      :expandedRowKeys="expandedRowKeys"
      :scroll="{ x: 2000 }"
      :expandedRowRender="expandedRowRender"
      :expandIconColumnIndex="-1"
    >
      <!-- <template #expandedRowRender> 123 </template> -->
      <template #bodyCell="{ text, record, column }">
        <span @click="handleCellClick(record, column)">
          {{ text }}
        </span>
      </template>
    </a-table>
    <hr />

    <a-button @click="handleUpdateValue">切换中英文</a-button>

    <h4 style="margin-bottom: 16px">Presets:</h4>
    <div>
      <a-tag color="pink">pink</a-tag>
      <a-tag color="red">red</a-tag>
      <a-tag color="orange">orange</a-tag>
      <a-tag color="green">green</a-tag>
      <a-tag color="cyan">cyan</a-tag>
      <a-tag color="blue">blue</a-tag>
      <a-tag color="purple">purple</a-tag>
    </div>
    <h4 style="margin: 16px 0">Custom:</h4>
    <div>
      <a-tag color="#f50">#f50</a-tag>
      <a-tag color="#2db7f5">#2db7f5</a-tag>
      <a-tag color="#87d068">#87d068</a-tag>
      <a-tag color="#108ee9">#108ee9</a-tag>
    </div>
    <div>
      <svg-icon name="search" />
      {{ $t('route.sendMessage') }}
    </div>
    <div>
      {{ value }}
      <a-select
        v-model:value="value"
        mode="tags"
        style="width: 100%"
        placeholder="Tags Mode"
        :options="options"
        @change="handleChange"
      ></a-select>
    </div>
  </div>
</template>

<style scoped>
#main-app {
  height: 100%;
  background: #f6f9fc;
  .footer {
    background: #f6f9fc;
    position: absolute;
    z-index: 999;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-family: PingFang-SC-Regular, PingFang-SC;
    padding: 12px 0;
    .copyright {
      font-size: 12px;
      color: #666;
      .icon {
        width: 19px;
        height: 19px;
        transform: translateY(5px);
        display: inline-block;
        background-image: url('@/assets/images/ba.png');
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
    span {
      &.privacy {
        &:hover {
          color: #f89000;
          cursor: pointer;
          font-size: 12px;
        }
      }
    }
    a {
      text-decoration: none;
      color: #666;
      &:hover {
        color: #f89000;
        cursor: pointer;
        font-size: 12px;
      }
      &:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>
